﻿@page "/components/datagrid"

<DocsPage>
    <DocsPageHeader Title="DataGrid" Component="@nameof(MudDataGrid<T>)" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Default Data Grid">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> is used to display and work with small amounts of data up to very large datasets, easily and efficiently. In its
                    simplest form, the data grid is just a table, displaying data from a data source. In its most complex form, the data grid allows filtering, editing, grouping, and much more.
                    <br><br>
                    Using the data grid is pretty simple to start with and just requires setting the <CodeInline>Items</CodeInline> property to a collection of data as IEnumerable, and adding
                    <CodeInline>Columns</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridBasicExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Column Types">
                <Description>
                    There are two main column types: <CodeInline>&lt;PropertyColumn></CodeInline> and <CodeInline>&lt;TemplateColumn></CodeInline>. PropertyColumns
                    are typically used to display a single property defined by the parameter, <CodeInline>Property</CodeInline>.
                    You would use TemplateColumns when you want to display a column without linking it directly to a property in the data source. For example, if you
                    wanted to show a column that has action buttons. TemplateColumn cannot infer things such as Title and SortBy like the PropertyColumn.
                    <br><br>
                    You can pass a format string in the <CodeInline>Format</CodeInline> parameter on PropertyColumn to format the value for the cells.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridColumnTypesExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridColumnTypesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Advanced Data Grid">
                <Description>
                    In a more advanced scenario, the data grid offers sorting, filtering, pagination and selection. There are two ways to filter the data
                    fed into the data grid. A <CodeInline>QuickFilter</CodeInline> function allows filtering the items in the grid globally. Data can also be filtered by specifying
                    column filters, enabling a more robust filtration.
                    <br><br>
                    In this example, we turn sorting and filtering off for the Nr column using the boolean <CodeInline>Sortable</CodeInline> and <CodeInline>Filterable</CodeInline> properties
                    as well as hide the column options icon button by setting the <CodeInline>ShowColumnOptions</CodeInline> property to <CodeInline>false</CodeInline> (which is hidden by default). Additionally, we
                    can override the default <CodeInline>SortBy</CodeInline> function for each column, seen in the Name column where we show how you can switch to a sort by the Name's length.
                    <br><br>
                    To hide the filter icons unless a column is currently filtered, you can set the <CodeInline>ShowFilterIcons</CodeInline> property to false.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridAdvancedExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridAdvancedExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Visual Styling">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> has many built in properties to change its style and also allows for custom styling as well.
                    <br><br>
                    Row level classes and styles can be applied using the <CodeInline>RowClass</CodeInline> and <CodeInline>RowStyle</CodeInline> properties
                    respectively. To style rows according to the data of the row, you would use the <CodeInline>RowClassFunc</CodeInline> and <CodeInline>RowStyleFunc</CodeInline>
                    properties. For even finer grain control, you can style at the header, cell and footer level as well by using the <CodeInline>HeaderClass</CodeInline>, <CodeInline>HeaderStyle</CodeInline>,
                    <CodeInline>HeaderClassFunc</CodeInline>, <CodeInline>HeaderStyleFunc</CodeInline>, <CodeInline>CellClass</CodeInline>,
                    <CodeInline>CellStyle</CodeInline>, <CodeInline>CellClassFunc</CodeInline>, <CodeInline>CellStyleFunc</CodeInline>,
                    <CodeInline>FooterClass</CodeInline>, <CodeInline>FooterStyle</CodeInline>, <CodeInline>FooterClassFunc</CodeInline> and <CodeInline>FooterStyleFunc</CodeInline> properties.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridVisualStylingExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridVisualStylingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Editing">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows editing the data passed into it. Setting the <CodeInline>ReadOnly</CodeInline> property
                    to <CodeInline>false</CodeInline> and the <CodeInline>EditMode</CodeInline> property to <CodeInline>DataGridEditMode.Form</CodeInline>
                    or to <CodeInline>DataGridEditMode.Cell</CodeInline> turns on editing. Edit mode <CodeInline>Form</CodeInline> displays a form in a popup
                    when editing. Edit mode <CodeInline>Cell</CodeInline> is more like Excel where each cell is ready to edit and as you make edits, they are
                    applied to the data source. To disable editing on a column, set its <CodeInline>IsEditable</CodeInline> property to <CodeInline>false</CodeInline>.
                    To mark a property as not required, set its <CodeInline>Required</CodeInline> property to <CodeInline>false</CodeInline>.
                    <br><br>
                    By default, the built-in editing in the data grid automatically supplies the proper input component for each cell. However, this can be overridden
                    by supplying an <CodeInline>&lt;EditTemplate></CodeInline>. Inside the template, you have full control over the editing. Take a look at the Position
                    column below.

                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridEditingExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridEditingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grouping">
                <Description>
                    The <CodeInline Tag="true">MudDataGrid</CodeInline> allows users to organize data by grouping rows that share common values in 
                    selected columns. Grouping collapses similar data into expandable sections, making large datasets more manageable. 
                    <MudText Typo="Typo.h6" Class="mt-2">Enabling Grouping</MudText>
                    <MudText HtmlTag="p">
                        To enable grouping functionality across the grid set the <CodeInline>Groupable</CodeInline> property on <CodeInline Tag="true">MudDataGrid</CodeInline> 
                        to <CodeInline>true</CodeInline>. This activates the grouping feature globally, allowing all columns to be groupable unless explicitly overridden.
                        Each column also supports its own <CodeInline>Groupable</CodeInline> property. This column-level property takes precedence over the grid-level 
                        setting. For example, if the grid’s <CodeInline>Groupable</CodeInline> is <CodeInline>true</CodeInline> but a column’s 
                        <CodeInline>Groupable</CodeInline> is set to <CodeInline>false</CodeInline>, that column will not be groupable via the UI.
                    </MudText>
                    <MudText Typo="Typo.h6" Class="mt-2">Default Grouping State</MudText>
                    <MudText HtmlTag="p">
                        To define whether a column should start grouped by default, set its <CodeInline>Grouping</CodeInline> property to <CodeInline>true</CodeInline>. 
                        This property supports two-way binding <CodeInline>@@bind-Grouping</CodeInline>, meaning it updates if the user groups or ungroups the column 
                        via the grid’s UI.                         
                    </MudText>
                    <MudAlert Severity="Severity.Info" Dense="true">
                        Note that for <CodeInline>Grouping</CodeInline> to take effect, either the column or grid must have <CodeInline>Groupable</CodeInline> enabled.
                    </MudAlert>
                    <MudText Typo="Typo.h6" Class="mt-2">Additional Features</MudText>
                    <MudList T="string" Dense="true" ReadOnly="true">
                        <MudListItem Class="py-0">Multi-level grouping is supported, allowing hierarchical organization by multiple columns simultaneously</MudListItem>
                        <MudListItem Class="py-0">Group headers display the grouped column name or <CodeInline>GroupTemplate</CodeInline>, with expansion controls</MudListItem>
                        <MudListItem Class="py-0">
                            <CodeInline>Grouping</CodeInline>, <CodeInline>GroupExpanded</CodeInline>, and <CodeInline>GroupByOrder</CodeInline> are two-way bindable column parameters.
                        </MudListItem>
                    </MudList>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridGroupingMultiLevelExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridGroupingMultiLevelExample />
            </SectionContent>
        </DocsPageSection>


         <DocsPageSection>
            <SectionHeader Title="Sorting">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to either disable sorting entirely, sort by single column or by multiple columns via
                    the <CodeInline>SortMode</CodeInline> property. The default (<CodeInline>SortMode.Multiple</CodeInline>) allows sorting on more than one column (Hold <CodeInline>Ctrl-Key</CodeInline>) while clicking
                    on a header column to extend the sort operation to another column.<br />
                    Clicking on the column header while <CodeInline>Alt-Key</CodeInline> is pressed, will un-sort a column (or remove it from the set of sorted columns) when multiple sorting
                    is enabled. In the case of multiple sorting, a small index-number next to the sort direction arrow will indicate the order in which columns are sorted.<br />
                    When mode is set to <CodeInline>SortMode.Single</CodeInline>, only a single column can be used for sorting at a time. Using another column for sorting will automatically
                    un-sort any former sorted column. In single mode, the number indicator next to the direction arrow will not be shown.<br/><br/>
                    In both <i>active</i> modes, single columns can be excluded from sorting by setting the <CodeInline>Sortable</CodeInline> property to false for that column.
                    When SortMode is set to <CodeInline>SortMode.None</CodeInline> sorting is disabled globally and setting the <CodeInline>Sortable</CodeInline> property on a column has no effect.<br /><br />
                    You can also use the <CodeInline>SortBy</CodeInline> parameter on a <CodeInline>TemplateColumn</CodeInline> to allow sorting on that column.
                    <br /><br />
                    When using <CodeInline>PropertyColumn</CodeInline>, if the <CodeInline>Property</CodeInline> lambda expression returns a <b>primitive type</b>, 
                    the <CodeInline>SortDefinition</CodeInline>'s <CodeInline>SortBy</CodeInline> will return the Property's <CodeInline>nameof</CodeInline> value.
                    Instead, if the Property lamda expression contains a complex value, the SortBy will return the column GUID.
                    In this case, if you need to retrieve the column, you have several options:
                    <MudList T="string" Dense>
                        <MudListItem>- <b>Embed a CellTemplate within the PropertyColumn</b>: Use the lambda expression of the PropertyColumn to return the primitive Property value, while implementing the more complex, ad-hoc logic in the embedded CellTemplate.</MudListItem>
                        <MudListItem>- <b>Title lookup via GUID</b>: Assign a Title to the TemplateColumn, and a reference to the MudDataGrid using <code>@@ref</code>. Iterate over the RenderedColumns to find the TemplateColumn by matching its unique identifier (where PropertyName == SortDefinition.SortBy), and extract its Title.</MudListItem>
                        <MudListItem>- <b>Create a custom TemplateColumn</b>: Inherit from the Column base class and override the PropertyName's default behavior and implement your own custom logic instead of relying on a randomly generated identifier</MudListItem>
                    </MudList>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="my-1">Changing the SortMode at runtime will reset any former sort orders on all columns.</MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridSortingExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridSortingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Advanced Sorting">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to provide your own <CodeInline>Comparer</CodeInline> for advanced sorting. Keep in mind that the <CodeInline>Comparer</CodeInline>
                    will use the same object passed by the <CodeInline>SortBy</CodeInline> parameter. If <CodeInline>SortBy</CodeInline> is not supplied, it will use the column item for its comparison.
                    You can also manually call <CodeInline>SetSortAsync</CodeInline> on the DataGrid while passing your <CodeInline>Comparer</CodeInline>.
                    <CodeInline>Comparer</CodeInline> must implement <CodeInline>IComparer&lt;object></CodeInline>. This example uses a natural sorting algorithm to sort strings with numbers properly.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridCustomSortingExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridCustomSortingExample />
            </SectionContent>
        </DocsPageSection>

         <DocsPageSection>
            <SectionHeader Title="Filtering">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> supports filtering with several different <CodeInline>DataGridFilterMode</CodeInline>s by setting the <CodeInline>FilterMode</CodeInline> property.
                    <CodeInline>DataGridFilterMode.Simple</CodeInline> is the default where all filters are managed in one popover in the data grid. It allows you to
                    set multiple filters at one time for multiple different columns. In <CodeInline>DataGridFilterMode.ColumnFilterMenu</CodeInline> mode, there is a dedicated popover for
                    each column. Lastly, <CodeInline>DataGridFilterMode.ColumnFilterRow</CodeInline> allows you to inline the filtering behavior directly into the data grid.
                    <br><br>
                    Is it possible to define the case sensitivity when filtering string values by setting the parameter <CodeInline>FilterCaseSensitivity</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridFilteringExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridFilteringExample />
            </SectionContent>
        </DocsPageSection>

         <DocsPageSection>
            <SectionHeader Title="Advanced Filtering">
                <Description>
                    It is possible to customize filtering by utilizing the <CodeInline>&lt;FilterTemplate></CodeInline> available on the <CodeInline>&lt;MudDataGrid></CodeInline>
                    as well as each <CodeInline>&lt;Column></CodeInline>. In the example below, the Sign column is customized.
                    <br><br>
                    Inside the <CodeInline>&lt;FilterTemplate></CodeInline> on the data grid while using <CodeInline>DataGridFilterMode.Simple</CodeInline>, the context is set to the
                    data grid's FilterDefinitions to allow for customizing the filtering behavior.
                    <br><br>
                    When using the <CodeInline>&lt;FilterTemplate></CodeInline> in the column specific filter modes, the context is a <CodeInline>DataGridFilterMode.Simple</CodeInline>
                    which gives access to several helpful properties and actions. For example, the current <CodeInline>FilterDefinition</CodeInline> related to the column is available as well
                    as several actions to make it easier to implement custom filter behavior such as <CodeInline>ApplyFilter</CodeInline> and <CodeInline>ClearFilter</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridAdvancedFilteringExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridAdvancedFilteringExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Row Detail View">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to create hierarchical layouts. To do that the <CodeInline>HierarchyColumn</CodeInline> has to be added in the <CodeInline>Columns</CodeInline> definitions.
                    <br><br>
                    You can customize the icon to toggle the RowDetail, disable the toggle button and also initially expand the RowDetail. In addition most customization options are available
                    including <CodeInline>EnableHeaderToggle</CodeInline> that puts a Toggle Icon in the header row to Expand/Collapse all.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridDetailRowExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridDetailRowExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Resizing">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to resize columns interactively when
                    <CodeInline>ColumnResizeMode</CodeInline> is not set to <CodeInline>None</CodeInline>, which is the default.
                    There are two modes for resizing: <CodeInline>ResizeMode.Container</CodeInline> and <CodeInline>ResizeMode.Column</CodeInline>.
                    <CodeInline>ResizeMode.Container</CodeInline> resizes the entire data grid while <CodeInline>ResizeMode.Column</CodeInline> only resizes
                    columns using available space within the data grid.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridResizeExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridResizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Data Aggregation">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to aggregate data in several different ways. Data aggregation happens in the
                    footer of the grid for the most part. By setting an <CodeInline>AggregateDefinition</CodeInline>, you can easily add a quick built-in aggregate
                    or choose to tailor the display to your needs. There are 6 different <CodeInline>AggregateTypes</CodeInline> that can be used with the
                    <CodeInline>AggregateDefinition</CodeInline>: Avg, Count, Custom, Max, Min and Sum. For more control over the data aggregation, you can choose the
                    <CodeInline>AggregationType.Custom</CodeInline> and supply your own function which will return a formatted string to display. Lastly, for
                    complete control over the data aggregation including the look and feel, you use <CodeInline>&lt;FooterTemplate></CodeInline> which has its
                    context set to the <CodeInline>CurrentPageItems</CodeInline>.
                    <br><br>
                    Aggregation is automatically applied to groups when the data grid is grouped by a column. Try it out by grouping the Status column!
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridAggregationExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridAggregationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sticky Columns">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> allows you to make a column stick to the left or right. Setting the <CodeInline>StickyLeft</CodeInline> or <CodeInline>StickyRight</CodeInline> properties
                    to <CodeInline>true</CodeInline> will make those columns "sticky". You must turn on <CodeInline>HorizontalScrollbar</CodeInline> to see the columns stick to either side.
                    <br><br>
                    There are a couple of things to keep in mind with sticky columns. First, if there are not enough columns and data to force the data grid to scroll, you will not see
                    the columns stick, and that is by design and simply how sticky works in CSS. Secondly, there is nothing stopping you from making multiple columns sticky, but it will
                    not have the effect you presumably intend. Instead, each column will be sticky when it reached the left or right side of the data grid and will overlap the sticky column
                    before it.

                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridStickyColumnsExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridStickyColumnsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Server Side Filtering, Sorting and Pagination">
                <Description>
                    Set <CodeInline>ServerData</CodeInline> to load data from the backend that is filtered, sorted and paginated.
                    DataGrid will call this async function whenever the user navigates the pager or changes sorting by clicking on the sort header icons.
                    In this example, we also show how to force the datagrid to update when the search textfield blurs, so that the datagrid reloads server-filtered data.
                    <MudAlert Severity="Severity.Warning" Dense="true" Class="mt-3">
                        The parameter <CodeInline>ServerData</CodeInline> is incompatible with the parameters <CodeInline>Items</CodeInline> and <CodeInline>QuickFilter</CodeInline>. If <CodeInline>ServerData</CodeInline> is mixed with <CodeInline>Items</CodeInline> and <CodeInline>QuickFilter</CodeInline>, a <CodeInline>InvalidOperationException</CodeInline> is throw at runtime.
                    </MudAlert>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        The example show a solution to replace <CodeInline>QuickFilter</CodeInline> when <CodeInline>ServerData</CodeInline> is used.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridServerSideExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridServerSideExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Virtualization">
                <Description>
                    The items in the <CodeInline>&lt;MudDataGrid></CodeInline> can be virtualized to provide better rendering performance. Setting the <CodeInline>Virtualize</CodeInline> property
                    to <CodeInline>true</CodeInline> will cause the items to be rendered virtually. You must restrict the height for virtualization to work.

                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridVirtualizationExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridVirtualizationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Virtualize server data">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> supports virtualization of data fetched from a server, enhancing the grid's performance for large datasets.
                    For this feature to work, the <CodeInline>Virtualize</CodeInline> property must be set to <CodeInline>true</CodeInline>,
                    the <CodeInline>VirtualizeServerData</CodeInline> parameter should be used to facilitate data retrieval and streaming from the server,
                    and the <CodeInline>ItemSize</CodeInline> should be specified to optimize virtualization.

                    Please make sure to constrain the grid's height, as virtualization relies on this dimension.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DataGridVirtualizeServerDataExample" ShowCode="false" Block="true" FullWidth="true">
                <DataGridVirtualizeServerDataExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Observability">
                <Description>
                    When loading the <CodeInline>&lt;MudDataGrid></CodeInline> with a collection that implements <CodeInline>INotifyCollectionChanged</CodeInline>, changes to the
                    underlying collection will automatically be reflected in the <CodeInline>&lt;MudDataGrid></CodeInline>.

                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridObservabilityExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridObservabilityExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="CultureInfo">
                <Description>
                    DataGrid <CodeInline>Culture</CodeInline> (CultureInfo) property is used to display and editing/filter columns data.
                    Each <CodeInline>&lt;Column></CodeInline> can define his own culture,
                    to allow to specify its format individually.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridColumnCultureExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridColumnCultureExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Column Reordering">
                <Description>
                    To enable Column Reordering via Drag and Drop, set the <CodeInline>DragDropColumnReordering</CodeInline> parameter to true. Columns can override this parameter with their <CodeInline>DragAndDropEnabled</CodeInline> parameter if necessary.
                    In the example all but two fixed columns can be reordered by dragging their header onto another column header to swap places. On mouse-over the draggable columns show their <CodeInline>DragIndicatorIcon</CodeInline> and when dragging
                    a header over another column header, it will signal its ability to swap places by changing its text color. The drag-over effect can be customized by setting parameters <CodeInline>DropAllowedClass</CodeInline> and <CodeInline>DropNotAllowedClass</CodeInline>
                    to your own CSS classes.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridColumReorderingExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridColumReorderingExample />
            </SectionContent>
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Columns Panel">
                <Description>
                    The <CodeInline>&lt;MudDataGrid></CodeInline> can open a columns panel using <CodeInline>ShowColumnsPanel</CodeInline>.
                    The panel allows the re-ordering, hiding, filtering and grouping of columns. The enabled functionality matches the grid and column options except column re-ordering.
                    <br><br>
                    Column re-ordering is enabled in the panel using the <CodeInline>ColumnsPanelReordering</CodeInline> property. Re-ordering is on an insert basis, so it does not respect the column level <CodeInline>DragAndDropEnabled</CodeInline> property which swaps columns.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridColumnsPanelExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridColumnsPanelExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Context Menu">
                <Description>
                    A context menu can be added to increase the flexibility and efficiency that the <CodeInline>&lt;MudDataGrid></CodeInline> offers.
                    There are several scenarios where a context menu can be beneficial such as performing row level actions,
                    accessing additional information, or just providing a more intuitive user experience.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridContextMenuExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridContextMenuExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Validator">
                <Description>
                    When a <CodeInline>&lt;MudDataGrid></CodeInline> is used as part of a <CodeInline>MudForm</CodeInline> you might want to
                    bind the <CodeInline>Validator</CodeInline> property to the outer <CodeInline>MudForm</CodeInline> so that validation
                    and <CodeInline>IsTouched</CodeInline> states are reflected in/propagated to the outer <CodeInline>MudForm</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridValidatorExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridValidatorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Other Options">
                <Description>
                    There are many options available for the <CodeInline>&lt;MudDataGrid></CodeInline> that are not covered in the examples above.
                    The <CodeInline>&lt;ColGroup></CodeInline> component allows you to apply a span or style property to multiple columns. However, 
                    the available styles are limited to a few CSS properties, including width, visibility, background, and border. Additionally, the 
                    `span` property enables a column to extend across multiple columns. The <CodeInline>Loading</CodeInline> property displays a loading 
                    indicator while the data grid is retrieving data. You can bind this attribute to a `bool` variable set to `true` when initializing 
                    the page and toggle it once the data has loaded. The <CodeInline>FixedHeader</CodeInline> property ensures that the header remains
                    fixed at the top of the grid, even when scrolling. These are just a few of the many available options. For a complete list and 
                    additional details, refer to the <MudLink Href="components/datagrid#api">API</MudLink> documentation above.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(DataGridOtherOptionsExample)" ShowCode="false" Block="true" FullWidth="true">
                <DataGridOtherOptionsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
